@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-link';
@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';

$sizes: 's', 'm', 'l';
$text-modes: 'default', 'accent', 'on-accent';
$appearances: 'invert-neutral','neutral', 'primary', 'red', 'orange', 'blue', 'violet', 'pink', 'yellow', 'green';
$icon-sizes: (
  's': $icon-xs,
  'm': $icon-s,
  'l': $icon-s,
);

.link {
  cursor: pointer;

  display: inline-flex;
  align-items: center;

  width: fit-content;
  max-width: 100%;

  text-decoration: none;
  text-decoration-skip-ink: none;

  &[data-inside-text] {
    display: inline;
  }

  @each $appearance in $appearances {
    &[data-appearance='#{$appearance}'] {
      &[data-text-mode='default'] {
        color: simple-var($theme-variables, 'sys', $appearance, 'text-support');

        &:hover {
          color: simple-var($theme-variables, 'sys', $appearance, 'text-main');
        }

        &:focus-visible {
          @include outline-var($container-focused-s);

          color: simple-var($theme-variables, 'sys', $appearance, 'text-main');
          outline-color: $sys-available-complementary;
        }
      }

      &[data-text-mode='accent'] {
        color: simple-var($theme-variables, 'sys', $appearance, 'accent-default');

        &:hover {
          color: simple-var($theme-variables, 'sys', $appearance, 'text-main');
        }

        &:focus-visible {
          @include outline-var($container-focused-s);

          color: simple-var($theme-variables, 'sys', $appearance, 'text-main');

          @if $appearance == 'invert-neutral' {
            outline-color: $sys-available-on-complementary;
          }

 @else {
            outline-color: $sys-available-complementary;
          }
        }
      }

      &[data-text-mode='on-accent'] {
        color: simple-var($theme-variables, 'sys', $appearance, 'on-accent');

        &:hover {
          color: simple-var($theme-variables, 'sys', $appearance, 'on-accent');
          opacity: $opacity-a080;
        }

        &:focus-visible {
          @include outline-var($container-focused-s);

          color: simple-var($theme-variables, 'sys', $appearance, 'on-accent');
          opacity: $opacity-a080;
          outline-color: $sys-available-on-complementary;
        }
      }
    }
  }

  @each $size in $sizes {
    &[data-size='#{$size}'] {
      @each $text-mode in $text-modes {
        &[data-text-mode='#{$text-mode}'] {
          @if $text-mode == 'default' {
            @include composite-var($theme-variables, 'sans', 'body', $size);
          }

 @else {
            @include composite-var($theme-variables, 'link', 'body', $size);
          }
        }
      }

      @include composite-var($link, 'container', $size);

      svg {
        width: simple-var($icon-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
        height: simple-var($icon-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
      }
    }
  }
}

.icon {
  flex-shrink: 0;
}